<template>
  <div>
    <!--购买成功页面-->
    <!--投票者成功购买获得一次投票就会-->
    <p v-if="Tuikh" box="center" text="center" tadeSize="36" color="grey3">成功购买套餐，获得1次投票机会</p>
    <!--丽人自己购买套餐成功-->
    <div v-if="!Tuikh" box="center" text="center">
      <p tadeSize="36" color="grey3">成功购买套餐，为自己增加{{poin.add_vote_num}}票</p>
      <p color="pink" style="font-size:1.365rem;">+{{poin.add_vote_num}}票</p>
      <div class="ranking" tadeSize="26" color="grey6">
        <i>当前第{{ranking.rank}}名</i>
        <i>距离上一名差：{{ranking.pre_vote_num}}票</i>
      </div>
    </div>
    <!--订单详情 前往投票-->
    <div text="center" box="center" tadeSize="30">
      <p><img class="cpImg" :src="poin.img"/></p>
      <p color="grey3">{{poin.title}}<i box="inb" marginleft="4">{{poin.price}}元</i></p>
      <div box="center" class="jgts" tadeSize="26" color="grey9">
        <i radius="50" box="inb" bg="pink">i</i>
        请及时到I美平台预约时间划扣该订单
      </div>
      <div class="button-box">
        <button @click="des(17051797501015)" class="botton b1" radius="5" tadeSize="30">查看订单</button>
        <router-link :to="aline"><button class="botton b2" radius="5" tadeSize="30" v-text="Tuikh?'前往投票':'前往我的主页'"></button></router-link>
      </div>
    </div>
    <!--二维码，关注i美微信公众号-->
    <p style="border-top: 10px solid #f5f5f5;padding:30px 0px;" text="center" tadeSize="26" color="grey6">
      <img style="width:105px;height:105px" src="../../../static/images/erwma.png"/><br/>长按识别<br/>关注I美平台微信公众号
    </p>
  </div>
</template>
<script>
  import { getDisVotes } from '../../api/index'
  import { getURL } from '../../api/buy'
  import  {mapState} from 'vuex'
  export default {
    data() {
      return {
        /*进来时切换状态*/
        Tuikh: false,
        /*成功购买套餐*/
        poin:[],
        /**/
        str:'',
        /*前往投票或主页*/
        aline:'',
        /*丽人排名*/
        ranking:''
      }
    },
    methods: {
      TuiKh(){ /*购买套餐为自己加票*/
        this.poin = JSON.parse(sessionStorage.obj);
        this.poin.add_vote_num*=this.$route.query.num;
//        console.log(this.poin);
        if (this.role==1){ /*状态切换*/
          this.Tuikh = false;
        }else{
          this.Tuikh = true;
        }
      },
      tizion(){ /*投票与主页链接切换*/
        if (this.role==1){
           this.aline='detailsMe?id='+this.option_id;
        }else{
           this.aline='details?id='+sessionStorage.liren_id;
        }
      },
      des(id){ /*查看订单*/
          window.location.href=getURL()+'/my-meal.html?token='+localStorage.getItem('token');
      },
      getDisVotes(){ /*丽人排名信息*/
          this.$http.get(getDisVotes(localStorage.getItem('token'),this.option_id)).then(res=>{
//              console.log(res.data.data);
            this.ranking=res.data.data;
          });
      }
    },
    computed: {
      ...mapState({
        //角色
        role: state => state.vux.adminMsg.role,       /* 1为丽人，2为路人*/
        option_id: state => state.vux.adminMsg.option_id, /*丽人id*/
      })
    },
    created() {
      this.TuiKh();
      this.tizion();
      this.getDisVotes();
    }
  }
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .ranking {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
  }

  .ranking i {
    margin: 0 0.853rem;
  }

  .cpImg {
    width: 4.693rem;
    height: 4.693rem;
  }

  .jgts i {
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-family: "新宋体" !important;
    color: #ffffff;
    font-size: 12px;
  }

  .botton {
    width: 5.888rem;
    height: 1.621rem;
    line-height: 1.621rem;
    margin: 0 10px;
    border: 1px solid #ed007c;
  }

  [box='center'] {
    overflow: visible;
  }



  .button-box {
    /*button{*/
      /*box-shadow: 1px 1px 4px #d5026e;*/
    /*}*/
    .b1 {
      background: #fff;
      color: #ed007c;
      &:active{
        background: #f7f8f8;
      }
    }
    .b2 {
      background: #ed007c;
      color: #fff;
      &:active{
        background: #d5026e;
      }
    }

  }
</style>
